<template>
  <div class="header-wrapper">
    <div class="header-top">
      <div class="w1190">
        <div class="header-top-text">
          卓一慧众一站式服务平台
          <a-button type="link" @click="$router.push({ name: 'index' })">返回首页</a-button>
        </div>
        <div class="header-top-component">
          <span v-if="token">您好， {{name}} &nbsp; <a @click="logout">退出</a></span>
          <span v-else><router-link :to="{ name: 'Login' }">请登录</router-link></span>
          <a-divider type="vertical" />
          <router-link :to="{ name: 'MemberIndex' }">个人中心</router-link>
          <a-divider type="vertical" />
          咨询热线：<span>400-9932-799</span>
        </div>
        <div class="header-top-nav">
          <div class="first" v-for="(item, i) in navList" :key="item.id">
            <a target="_blank" :href="`/to/${item.id}`">{{item.name}}</a>
            <div class="second">
              <div class="w1190">
                <a target="_blank" v-for="sub in navList[i].data" :key="sub.id" :href="`/product/list/${item.id}/${sub.id}`">{{sub.name}}</a>
              </div>
            </div>
          </div>
          <div class="first">
            <a @click="onSwt">设计服务</a>
            <div class="second">
              <div class="w1190">
                <a @click="onSwt">商标设计</a>
                <a @click="onSwt">VI基础设计</a>
                <a @click="onSwt">平面设计</a>
                <a @click="onSwt">网站设计开发</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-logo">
      <div class="w1190">
        <div class="head" @click="$router.push({ name: 'index' })">
          <img src="@/assets/images/tui_logo.png" />
          <div class="txt">
            <h2>商标注册查询系统</h2>
            <h5>National Trademark Registration Inquiry System</h5>
          </div>
        </div>
<!--        <div class="header-search">-->
<!--          <a-form-model-->
<!--            layout="inline"-->
<!--          >-->
<!--            <a-form-model-item style="margin-right:4px">-->
<!--              <a-input v-model="keyword" size="large" style="width: 400px" placeholder="请输入要搜索的关键词">-->
<!--                <a-icon slot="prefix" type="search" style="color:rgba(0,0,0,.25)" />-->
<!--              </a-input>-->
<!--            </a-form-model-item>-->
<!--            <a-form-model-item>-->
<!--              <a-button class="btn-search" size="large" type="primary" @click="onSearch">立即查找</a-button>-->
<!--            </a-form-model-item>-->
<!--          </a-form-model>-->
<!--        </div>-->
      </div>
    </div>
<!--    <div class="header-nav">-->
<!--      <div class="w1190">-->
<!--        &lt;!&ndash;        <a v-for="item in navList" :key="item.id" @click="$router.push({ name: 'ProductList', params:{ id: item.id } })">{{item.name}}<img src="@/assets/images/icon_hot.png"/></a>&ndash;&gt;-->
<!--        <div class="first" v-for="(item, i) in navList" :key="item.id">-->
<!--          <a @click="$router.push({ name: 'ProductDefault', params: { id: item.id } })">{{item.name}}<img src="@/assets/images/icon_hot.png"/></a>-->
<!--          <div class="second">-->
<!--            <div class="w1190">-->
<!--              <a v-for="sub in navList[i].data" :key="sub.id" @click="$router.push({ name: 'ProductList', params:{ fid: item.id, id: sub.id } })">{{sub.name}}</a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="first">-->
<!--          <a @click="onSwt">设计服务</a>-->
<!--          <div class="second">-->
<!--            <div class="w1190">-->
<!--              <a @click="onSwt">商标设计</a>-->
<!--              <a @click="onSwt">VI基础设计</a>-->
<!--              <a @click="onSwt">平面设计</a>-->
<!--              <a @click="onSwt">网站设计开发</a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="first">-->
<!--          <a @click="onSwt">国际服务</a>-->
<!--          <div class="second">-->
<!--            <div class="w1190">-->
<!--              <a @click="onSwt">国际商标服务</a>-->
<!--              <a @click="onSwt">国际专利服务</a>-->
<!--              <a @click="onSwt">国际公司服务</a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="first">-->
<!--          <a @click="onSwt">企业服务</a>-->
<!--          <div class="second">-->
<!--            <div class="w1190">-->
<!--              <a @click="onSwt">工商财税</a>-->
<!--              <a @click="onSwt">高新认定</a>-->
<!--              <a @click="onSwt">知识产权评估</a>-->
<!--              <a @click="onSwt">资质认证</a>-->
<!--              <a @click="onSwt">400电话</a>-->
<!--              <a @click="onSwt">条形码</a>-->
<!--              <a @click="onSwt">认证咨询</a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="first">-->
<!--          <a @click="onSwt">商标交易</a>-->
<!--        </div>-->
<!--        <div class="first">-->
<!--          <a @click="onSwt">维权保护</a>-->
<!--        </div>-->
<!--        <div class="first">-->
<!--          <a @click="$router.push({ path: '/tui/sbzc' })">商标查询</a>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import store from 'store'
import { getNav } from '@/api/web'
import apis from '@/api'
import { getCartList } from '@/api/cart'

export default {
  name: 'TuiHeader',
  data () {
    return {
      token: store.get(ACCESS_TOKEN),
      navList: [],
      keyword: '',
      cartNum: 0
    }
  },
  created () {
    this.getNavList()
    this.getCartNum()
  },
  methods: {
    getCartNum () {
      getCartList().then(res => {
        this.cartNum = res.result.total_count
      })
    },
    logout () {
      this.$store.dispatch('Logout').then(() => {
        window.location.reload()
      })
    },
    getNavList () {
      getNav().then(res => {
        this.navList = res.result.data
      })
    },
    onSwt () {
      window.open(apis.Swt)
    },
    onSearch () {
      if (this.keyword === '') {
        this.$warning({
          title: '务必输入要搜索的关键词'
        })
        return false
      }
      this.$nextTick(() => {
        this.$router.replace({ name: 'Search', query: { keyword: this.keyword } })
      })
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style scoped>

.w1190 {
  width: 1190px;
  margin: 0 auto;
}

.header-top {
  height: 36px;
  background: #f5f5f5;
  line-height: 36px;
  font-size: 12px;
}

.header-top .ant-btn {
  font-size: 12px
}

.header-top .header-top-nav{float: right;display: flex;align-items: center;margin-right: 50px;}
.header-top .header-top-nav .first{margin-left: 20px;}
.header-top .header-top-nav .first>a{color: #333;}
.header-top .header-top-nav .first .second{display: none;position: absolute;width: 100%;background-color: #ffffff;z-index: 1;background-color: #ffffff;left: 0;box-shadow: 0 2px 4px 1px rgb(0,0,0,0.05);}
.header-top .header-top-nav .first:hover .second{display: flex;align-items: center;}
.header-top .header-top-nav .first .second a{color: #333;margin-right: 15px;}
.header-top .header-top-nav .first:nth-child(1) .second .w1190{padding-left: 633px;}
.header-top .header-top-nav .first:nth-child(2) .second .w1190{padding-left: 701px;}
.header-top .header-top-nav .first:nth-child(3) .second .w1190{padding-left: 769px;}
.header-top .header-top-nav .first:nth-child(4) .second .w1190{padding-left: 837px;}
.header-top .header-top-text {
  float: left;
}

.header-top .header-top-component {
  float: right;
}

.header-top .header-top-component a {
  color: #333;
}

/deep/ .header-top .ant-btn {
  color: #666;
}

.header-logo {
  height: 133px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 5px 10px 1px rgb(0, 0, 0, .05);
  /*margin-bottom: 20px;*/
}

/deep/ .header-search .ant-input {
  border-color: #b98611;
}

.header-logo .w1190 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-logo .logo-img {
  float: left;
}

.header-logo .header-search {
  wdith: 650px;
  float: right;
}

/deep/ .header-search .ant-form-inline .ant-form-item {
  margin-right: 0;
}

.header-nav {
  background-color: #ffffff;
  /*padding-bottom: 12px;*/
  position: relative;
}

.header-nav .w1190 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-nav .first:hover .second {
  display: flex;
}

.header-nav .first > a {
  font-size: 16px;
  color: #666666;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  line-height: 40px;
}

.header-nav .first:hover > a {
  color: #ff2f32;
  font-weight: 700;
}

.header-nav .first .second {
  position: absolute;
  background-color: #ffffff;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 40px;
  display: none;
}

.header-nav .first .second .w1190 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-nav .first .second a {
  font-size: 14px;
  background: url('../../assets/images/icon_divide.png') no-repeat left center;
  padding: 0 25px 0 38px;
  color: #666666;
  line-height: 38px;
}

.header-nav .first .second a:first-child {
  background: none;
  padding-left: 0;
}

.header-nav .first .second a:hover {
  color: #ff2f32;
}

.header-nav a img {
  margin-left: 4px;
}

.btn-search {
  background: #b98611;
  border: 1px solid #b98611;
  border-radius: 0;
}
.head{display: flex;align-items: center;}
.head img{width: 95px;}
.head .txt{text-align: left;margin-left: 15px;}
.head .txt h2{font-size: 35px;font-weight: 700;letter-spacing: 5px;background: linear-gradient(to bottom, #f6c02d, #b98611);-webkit-background-clip: text;color: transparent;}
.head .txt h5{font-size: 20px;background: linear-gradient(to bottom, #f6c02d, #b98611);-webkit-background-clip: text;color: transparent;margin-top: -8px;}

</style>
